<template>
	<view class="ys">
		<view class="info">
			<!-- <view class="infoli">
				<view class="left">
					支付宝姓名
				</view>
				<view class="right">
					<input type="text" v-model="aliname" placeholder="请输入支付宝姓名">
				</view>
			</view>
			<view class="infoli">
				<view class="left">
					支付宝账号
				</view>
				<view class="right">
					<input type="text" v-model="alino" placeholder="请输入支付宝账号">
				</view>
			</view>
			<view class="infoli">
				<view class="left">
					支付宝收款码
				</view>
				<view class="right">
					<image v-if="aliImg" :src="domain+aliImg || '/static/add.png'" @click="uploadImg('ali')"
						mode="widthFix">
					</image>
					<image v-else src="/static/add.png" @click="uploadImg('ali')" mode="widthFix">
					</image>
				</view>
			</view> -->
			<view class="infoli">
				<view class="left">
					微信收款码
				</view>
				<view class="right">
					<image v-if="wxImg" :src="domain+wxImg || '/static/add.png'" @click="uploadImg('wx')"
						mode="widthFix">
					</image>
					<image v-else src="/static/add.png" @click="uploadImg('wx')" mode="widthFix">
					</image>
				</view>
			</view>
			<view class="infoli">
				<view class="left">
					银行名称
				</view>
				<view class="right">
					<input type="text" v-model="bankname" placeholder="请输入银行名称">
				</view>
			</view>
			<view class="infoli">
				<view class="left">
					银行户名
				</view>
				<view class="right">
					<input type="text" v-model="bank_user" placeholder="银行户名">
				</view>
			</view>
			<view class="infoli">
				<view class="left">
					银行卡卡号
				</view>
				<view class="right">
					<input type="number" v-model="bankno" placeholder="请输入银行卡卡号">
				</view>
			</view>
			<view class="infoli">
				<view class="left">
					开户银行
				</view>
				<view class="right">
					<input type="text" v-model="bankzh" placeholder="请输入开户银行">
				</view>
			</view>
			<button @click="setInfo">确认修改</button>
		</view>
	</view>
</template>

<script>
	import {
		getUserBank,
		UserBank
	} from "@/api/api.js"
	export default {
		data() {
			return {
				domain: this.$config.websiteUrl,
				aliname: '',
				alino: '',
				aliImg: '',
				wxImg: '',
				ali_show: '',
				wx_show: '',
				bankname: '',
				bankno: '',
				bankzh: '',
				bank_user: ''
			}
		},
		onLoad() {
			this.getUserBank()
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: './setinfo'
			})
		},
		methods: {
			setInfo() {
				UserBank({
					bank_name: this.bankname,
					bank_open: this.bankzh,
					bank_num: this.bankno,
					bank_user: this.bank_user,
					ali_code: this.ali_show,
					wechat_code: this.wx_show,
					ali_name: this.aliname,
					ali_phone: this.alino
				}).then(res => {
					uni.$showMsg(res.message)
					if (res.status == 1) {
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					}
				})
			},
			getUserBank() {
				getUserBank().then(res => {
					if (res.status == 1) {
						this.bankname = res.data.bank_name
						this.bankzh = res.data.bank_open
						this.bankno = res.data.bank_num
						this.bank_user = res.data.bank_user
						this.wxImg = res.data.wechat_code
						this.aliImg = res.data.ali_code
						this.aliname = res.data.ali_name
						this.alino = res.data.ali_phone
					} else {
						uni.$showMsg(res.message)
					}
				})
			},
			seeimg(url) {
				let urls = [url]
				uni.previewImage({
					urls
				})
			},
			uploadImg(type) {
				var that = this
				uni.chooseImage({
					sourceType: ['album', 'camera'], //从相册选择
					count: 1,
					success: (res) => {
						let igmFile = res.tempFilePaths;
						uni.showLoading({
							mask: true,
							title: '加载中'
						})
						for (let i = 0; i < igmFile.length; i++) {
							uni.uploadFile({
								url: that.$config.requestUrl +
									'/Index/forUpload',
								header: {
									'token': uni.getStorageSync('token')
								},
								formData: {
									accept: 'image',
								},
								filePath: igmFile[i],
								name: 'image',
								success: (res) => {
									uni.hideLoading()
									let imgRes = JSON.parse(res.data); //微信和头条支持
									if (imgRes.status == 1) {
										let imgData = imgRes.data
										let url = imgData
										console.log(imgRes);
										if (type == 'ali') {
											this.aliImg = url
											this.ali_show = url
										} else if (type == 'wx') {
											this.wxImg = url
											this.wx_show = url
										}
										console.log();
									} else {
										uni.showToast({
											title: res.message,
											icon: "none"
										})
										return
									}
								},
								fail(err) {
									uni.hideLoading()
								}
							})
						}
					},
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
		padding-top: 15px;
		padding-bottom: 10px;
	}

	.info {
		width: 96%;
		margin: 0px auto;
		background: #fff;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 10px;

		button {
			width: 96%;
			height: 41px;
			border-radius: 20px;
			line-height: 41px;
			text-align: center;
			font-size: 15px;
			color: #fff;
			background: linear-gradient(0deg, #2573e8, #6ba9fc);
			margin: 0 auto;
			margin-top: 20px;
		}

		.infoli {
			display: flex;
			font-size: 14px;
			border-bottom: 1px solid #eee;
			padding: 18px 0;

			.left {
				width: 100px;
				font-size: 15px;
				font-weight: bold;
				margin-right: 10px;
			}

			.right {
				flex: 1;

				image {
					width: 30%
				}

				input {
					font-size: 14px;
				}
			}
		}
	}
</style>